<template>
  <div>
    <div class="post-card">
      <div class="left">
        <img class="avatar" :src="post.user.avatar" alt="" height="60" width="60">
        <div class="username">{{ post.user.nickName }}</div>
      </div>
      <div class="right">
        <div class="content">
          <div class="content-top">
            <div>
              <i v-if="showDel" class="el-icon-delete cursor" @click="delPost(post.id)" />
            </div>
          </div>
          <div class="content-text">
            {{ post.content }}
          </div>
          <div v-if="post.postImgList && post.postImgList.length>0" class="img-list">
            <img v-for="(i,index) in post.postImgList" :key="index" class="img-item" :src="i.url" alt="">
          </div>
        </div>
        <div class="time">{{ post.createTime | formatDate2 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { delPost } from '@/api/post'
import { getUser } from '@/utils/auth'
import moment from 'moment'
export default {
  name: 'ListItem',
  props: {
    'data': {
      type: Object,
      default: () => {
        return {
          user: {}
        }
      }
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // post: {}
    }
  },
  computed: {
    post() {
      const data = JSON.parse(JSON.stringify(this.data))
      return data
    },
    isLogin() {
      if (this.$store.state.user.user) {
        return true
      }
      return false
    }

  },
  created() {
  },
  methods: {
    delPost(id) {
      this.$confirm('您确认要删除这条动态吗？', '提示', {
        type: 'error',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        delPost(id).then(resp => {
          this.$notifySuccess('删除成功')
          this.$router.go(0)
        })
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.cursor{
  cursor: pointer;
}

.cursor:hover{
  color:red;
}

.post-card{
    display: flex;
    border-bottom: solid 1px #e6e6e6;
    padding-bottom: 16px;
    margin-top: 32px;
}

.left{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: baseline;
}

.avatar{
    border-radius: 50%;
    cursor: pointer;
}

.username{
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}

.right{
    flex: 7;
    margin-left: 16px;
}

.content{
    line-height: 24px;
    padding-bottom: 16px;
    font-size: 14px;
}

.time{
    color:#cdcdcd;
    font-size: 12px;
    padding-bottom: 8px;
}

.type{
    color: #409EFF;
}

.img-list{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.img-item{
  height: 100px;
  width: 100px;
  margin-right: 8px;
  margin-top: 8px;
}
.fujian{
  color:#999;
  font-size: 12px;
  margin-top: 20px;
}
.fujian-link{
  color:#409EFF;font-size:12px;padding-left:8px;
  padding-right: 8px;
}

.content-top{
  display: flex;
  justify-content: space-between;
}

.dd{
  color: #aaa;
  font-size: 12px ;
  margin-left: 8px;
}

.comment-container{

  margin-top: 20px;
  border-top: solid 1px #e6e6e6;

  .comment-item{
    display: flex;
    padding: 0;
    margin-top: 16px;

    .comment-left{
        img{
          height: 45px;
          width: 45px;
          margin-left: 0;
          border-radius: 50%;
        }
    }

    .comment-right{
      margin-left: 10px;
      .comment-username{
        font-size: 14px;
        color:#aaa;
      }
      .comment-content{
        margin-top: 10px;
        font-size: 14px;
      }
      .comment-time{
        margin-top: 10px;
        font-size: 12px;
        color: #cdcdcd;
      }
    }
  }
}

</style>
